<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML>
<HEAD>
  <style>
    * { margin:0px; padding:0px; border-width:0px}
    
    .friend
    {
      height: 64px; 
      width:100%; 
      padding-top:8px;
      border-bottom: 1px solid White
    }

    .friend:hover
    {
      background-color: Snow;
      border-bottom: 1px solid #3B5998
    }

    .friend-picture
    {
      float: left;
      height: 50px;
      width: 50px;
      background-color: #3B5998;
    }

    .friend-body
    {
      padding-left: 64px;
    }

    .friend-name
    {
      height: 16px;
      color:#3B5998; 
      font-size: 13px;
      font-weight: bold;
      font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
      cursor: pointer;
    }

    .friend-flags
    {
      height: 16px;
    }

    .friend-status-online
    {
      /*padding-left: 64px;*/
      float: left;
      height: 16px;
      font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
      font-size: 12px;
      font-weight: bold;
      color: OrangeRed;
      background-color:Cornsilk; 
      border-width:1px; 
      border-color:Brown;
      border-style:solid;
      padding-left: 4px;
      padding-right: 4px;
      vertical-align: Center;
    }

    .friend-status-offline
    {
      font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
      font-size: 12px;
      font-style: italic;
    }

    .friend-action
    {
      font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
      font-size: 12px;
      padding-left: 8px;
      height: 16px;
      cursor: pointer;
    }


  </style>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script src="./core/event.js"></script>
<script>

//alert(window.parent.Event);

function FriendView2(id, controller) { try{

  this.controller = controller;
  this.id = id;
  this.friend = model.me.friends[id];
  this.count = 0;
  
  this.update = function() { try{
    this.friend = model.me.friends[this.id];
    /*if ( this.count )
      alert(this.friend.picture);
    ++this.count;*/
    //alert(this.friend.name);
    var div = document.getElementById("friend-" + this.friend.id);
    if ( !div )
    {
      div = document.createElement("div");
      div.setAttribute("id","friend-" + this.friend.id)
      div.setAttribute("class","friend-view")
      div.innerHTML = "<div id='friend-" + this.friend.id + "-image' class='friend-image'><div>";
      div.innerHTML += "<div id='friend-" + this.friend.id + "-name' class='friend-name'><div>";
      document.getElementById("friend-list").appendChild(div);
      var cur = this.friend;
      Event.add( document.getElementById("friend-" + this.friend.id + "-name"), "click", function() { launcher.exec("private-chat", {id:cur.id}) }  );
    }
      
    var nameNode = document.getElementById("friend-" + this.friend.id + "-name");
    nameNode.innerHTML = this.friend.name;
    
    if ( this.friend.picture )
    {
      var imageNode = document.getElementById("friend-" + this.friend.id + "-image");
      imageNode.innerHTML = "<img src='" + this.friend.picture+"'/>";
    }
    
    // Event.add( nameNode, "click", function() { launcher.exec("private-chat", {id:cur.id}) }  );
  }catch(e) { alert(e.message); } }

  self = this;
  try{
  controller.subscribe( function() { self.update() } );
  } catch(e) { alert("controller.subscribe:"+ e.message); } 

}catch(e) { alert(e.message); } }



function FriendView3(friend) { try{
  this.friend = friend;

  this.update = function() { try{
    var div = document.getElementById("friend-" + this.friend.id);
    if ( !div )
    {
      div = document.createElement("div");
      div.setAttribute("id","friend-" + this.friend.id)
      div.setAttribute("class","friend-view")
      div.innerHTML = "<div id='friend-" + this.friend.id + "-image' class='friend-image'><div>";
      div.innerHTML += "<div id='friend-" + this.friend.id + "-name' class='friend-name'><div>";
      document.getElementById("friend-list").appendChild(div);
      var cur = this.friend;
      Event.add( document.getElementById("friend-" + this.friend.id + "-name"), "click", function() { launcher.exec("private-chat", {id:cur.id}) }  );
    }
      
    var nameNode = document.getElementById("friend-" + this.friend.id + "-name");
    nameNode.innerHTML = this.friend.name;
    
    if ( this.friend.picture )
    {
      var imageNode = document.getElementById("friend-" + this.friend.id + "-image");
      imageNode.innerHTML = "<img src='" + this.friend.picture+"'/>";
    }
  }catch(e) { alert(e.message); } }

  this.update();

  var self = this;
  acc.friends.getFriend(this.friend.id, function(){  self.update() } );
  
}catch(e) { alert(e.message); } }

function CreateFriend(id)
{
  var friendId = "friend-" + id;
  var friendIdName = friendId + "-name";
  var friendIdPicture = friendId + "-picture";
  var friendIdAction = friendId + "-action";
  var friendIdStatus = friendId + "-status";

  div = document.createElement("div");
  divPicture = document.createElement("div");
  divBody = document.createElement("div");
  
  div.appendChild(divPicture);
  div.appendChild(divBody);
  divName = document.createElement("div");
  divFlags = document.createElement("div");
  divStatus = document.createElement("div");
  divAction = document.createElement("div");
  divBody.appendChild(divName);
  divBody.appendChild(divFlags);
  divBody.appendChild(divStatus);
  divBody.appendChild(divAction);

  div.setAttribute("id", friendId);
  div.setAttribute("class", "friend");

  divPicture.setAttribute("id", friendIdPicture);
  divPicture.setAttribute("class", "friend-picture");
  
  divBody.setAttribute("class", "friend-body");

  divName.setAttribute("id", friendIdName);
  divName.setAttribute("class", "friend-name");

  divFlags.setAttribute("class", "friend-flags");
  divStatus.setAttribute("class", "friend-status-offline");
  divStatus.setAttribute("id", friendIdStatus);
  
  divAction.setAttribute("id", friendIdAction);
  divAction.setAttribute("class", "friend-action");

  return div;
}

function SetName(id, name)
{
  var friendId = "friend-" + id;
  var friendIdName = friendId + "-name";
  document.getElementById(friendIdName).innerHTML = name;
}

function SetPicture(id, picture)
{
  var friendId = "friend-" + id;
  var friendIdPicture = friendId + "-picture";
  document.getElementById(friendIdPicture).innerHTML = "<img src='" + picture + "'/>";
}

function SetAction(id, action, act)
{
  var friendId = "friend-" + id;
  var friendIdAction = friendId + "-action";
  document.getElementById(friendIdAction).innerHTML = action;
  if ( !document.getElementById(friendIdAction).friendId )
  {
    document.getElementById(friendIdAction).friendId = id;
    Event.add( document.getElementById(friendIdAction), "click", act);
  }
}

function SetStatus(id, status)
{
  var friendId = "friend-" + id;
  var friendIdStatus = friendId + "-status";
  
  document.getElementById(friendIdStatus).innerHTML = status;
  document.getElementById(friendIdStatus).setAttribute("class", "friend-status-" + status)
}

/*function IncomeChat(event)
{
  alert("IncomeChat() " + event.target.friendId);
}*/

function FriendOnline(m)
{
  var friendId = "friend-" + m.content.id;
  if ( friendViewList[m.content.id] ) 
    var friend = friendViewList[m.content.id].friend;
  
  /*var friendId = "friend-" + m.comtent.id;
  var friendIdStatus = friendId + "-status";
  */
  /*alert( m.content.id + " : " + m.content.status);*/
  SetStatus( m.content.id, m.content.status);
  if ( m.content.status == "online")
  {
    if ( friend && friend.id && friend.name && friend.picture )
      SetAction( m.content.id, "Пригласить в чат", function() { launcher.exec("private-chat", {id:friend.id, name:friend.name, picture:friend.picture}) } );
  }
}

function FriendView(friend) { try{
  this.disposed = false;
  this.friend = friend;
  
  document.getElementById("friend-list").appendChild( CreateFriend(this.friend.id) );

  this.dispose = function() { try{
    var onlineChannel = "faceonline.online."+ this.friend.id;
    comet.describe( onlineChannel , FriendOnline );
    comet.close( { channel:onlineChannel } );
    this.disposed = true;
  }catch(e) { alert(e.message); } }
  
  this.update = function(first) { try{
    
    if ( this.disposed ) return;
    
    SetName( this.friend.id, this.friend.name );
    if ( this.friend.picture )
      SetPicture( this.friend.id, this.friend.picture );

    if ( first )
    {
      SetStatus(this.friend.id, "offline");
      var onlineChannel = "faceonline.online."+ this.friend.id;
      comet.subscribe( onlineChannel , FriendOnline );
      comet.open( { channel:onlineChannel, min_size:1, max_size:2, cursor:1} );
    }

    //var cur = this.friend;
    //SetAction( this.friend.id, "Пригласить в чат", function() { launcher.exec("private-chat", {id:cur.id, name:cur.name, picture:cur.picture}) } );
  }catch(e) { alert(e.message); } }

  this.update(true);
  var self = this;
  acc.friends.getFriend(this.friend.id, function(){  self.update(false) } );
  
}catch(e) { alert(e.message); } }


function Create(friends) { try{

  friendViewList = {};
  for ( var f in friends) if (friends.hasOwnProperty(f) )
  {
    var id = friends[f].id;
    
    if (!friendViewList[id])
      friendViewList[id] =  new FriendView( friends[f] ) ;
  }

} catch(e) { alert(e.message); } }


function OnLoad() { try{

  
  window.comet = window.parent.comet;
  window.acc = window.parent.acc;
  window.model = window.parent.model;
  window.ctrl = window.parent.ctrl;
  window.launcher = window.parent.launcher;
  
  acc.friends.get(Create);
  // window.ctrl.friends.subscribe(Create);

}catch(e) { alert(e.message); } }


function Dispose() { try{
  
  acc.friends.dispose(Create);

  
  for ( var f in friendViewList) if (friendViewList.hasOwnProperty(f) )
  {
    friendViewList[f].dispose();
  }

  
}catch(e) { alert(e.message); } }

Event.add(window, 'load', OnLoad)

</script>

<body>

<!-- <h1>Список друзей</h1> -->
<div id="main">

<div id="friend-list">
</div>

</div>
</body>
</HTML>
